<template>
<div>
  <div v-show="loading" class="loading">
      正在跳转到登录页面  
    <van-loading type="spinner"  size="20px" />
  </div>
   <div class="content" v-show="!loading">
    <!-- 没有商品时 -->
    <div v-if="cartList.length === 0">
      <div class="box">购物车</div>
      <div class="noShop">
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0185845d81ddeea8012060be310913.png%401280w_1l_2o_100sh.png&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641015226&t=0b8875466050a44a162b21270b245bc1"
        />
        <p>购物车还是空的~~快去购物哦!</p>
        <router-link class="goHome" to="/home">点我去购物</router-link>
      </div>
    </div>
    <!-- 有商品时 -->
    <div class="carContainer" v-else>
      <div class="box">购物车</div>
      <!-- 每一项 -->
      <div class="carItem" v-for="(item, index) in cartList">
        <!-- 左边选择框 -->
        <div class="xuanze">
          <van-icon
            name="passed"
            class="check"
            :class="item.selected == true ? 'active' : ''"
            @click="changeCheck(!item.selected, index)"
          />
        </div>
        <!-- 每一项商品 -->
        <div class="shopItem">
          <img :src="item.imageUrl" class="shopImg" />
          <div class="shopInfo">
            <span>{{ item.name }}</span>
            <span class="price">￥{{ item.price }}元</span>
          </div>
        </div>
        <!-- 右边数量 -->
        <div class="countCtrl">
          <span class="add" @click="handlerChangeCount(true, index)">+</span>
          <span class="count">{{ item.count }}</span>
          <span class="del" @click="handlerChangeCount(false, index)">-</span>
        </div>
      </div>
      <!-- 购物车底部 -->
      <div class="cartFloor">
        <!-- 左边选择框 -->
        <div class="iconfont">
          <van-icon
            name="passed"
            :class="{ active: isAllChecked }"
            @click="changeAllCheck(!isAllChecked)"
          />
          <span class="allCheck">已选{{ allCount }}件</span>
        </div>
        <div class="right">
          <span>合计:￥{{ allPrice }}元</span>
          <span>去下单</span>
        </div>
      </div>
    </div>
  </div>
</div>
 
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Cart",
  data(){
    return{
      loading:false
    }
  },
  methods: {
    //每一个商品前面的选择按钮
    changeCheck(selected, index) {
      this.$store.commit("changeCheck", { selected, index });
    },
    //底部的选择按钮
    changeAllCheck(selected) {
      this.$store.commit("changeAllCheck", selected);
    },
    //增加商品数量或减少商品数量
    handlerChangeCount(addOrdel, index) {
      this.$store.commit("handlerChangeCount", { addOrdel, index });
    },
  },
  computed: {
    ...mapState({
      cartList: (state) => state.cart.cartList,
    }),
    //计算出已选择的数量
    allCount() {
      return this.cartList.reduce((pre, item) => {
        if (item.selected) {
          pre += item.count;
        }
        return pre;
      }, 0);
    },
    //计算总价格
    allPrice() {
      return this.cartList.reduce((pre, item) => {
        if (item.selected) {
          pre += item.count * item.price;
        }
        return pre;
      }, 0);
    },
    //计算出是否全选
    isAllChecked() {
      return this.cartList.every((item) => item.selected);
    },
  },
  mounted() {
    let token = localStorage.getItem("TOKEN");
    // console.log(token);
    if (!token) {
          this.loading = true
      setTimeout(() => {
        this.loading = false
        this.$router.push("/login");
      }, 1000);
    }
  },
};
</script>

<style scoped>
.loading{
  margin-top: 4rem;
}
.active {
  color: red;
}
.content {
  background-color: #ddd;
  width: 100%;
  height: 16.5rem;
}
.goHome {
  color: aquamarine;
}
.box {
  font-size: 0.5rem;
}
.noShop {
  text-align: center;
  width: 100%;
  height: 100%;
}
.noShop p {
  font-size: 0.5rem;
  color: yellowgreen;
}
.noShop img {
  background-color: #eee;
  margin-top: 5rem;
  text-align: center;
  width: 5rem;
  height: 5rem;
}
.carContainer {
  position: relative;
  width: 100%;
  height: 100%;
}
.carItem {
  width: 100%;
  height: 3rem;
  background-color: #eee;
  margin-top: 0.5rem;
  position: relative;
}
.carItem .xuanze {
  font-size: 0.5rem;
  line-height: 3rem;
  float: left;
}
.carItem .xuanze .check {
  width: 100%;
  height: 100%;
}
.carItem .shopItem {
  display: flex;
}
.carItem .shopItem .shopImg {
  width: 2rem;
  height: 2rem;
  margin-top: 0.5rem;
  margin-left: 0.2rem;
}
.carItem .shopItem .shopInfo {
  display: flex;
  flex-direction: column;
  margin-left: 0.5rem;
}
.carItem .shopItem .shopInfo span {
  margin-top: 0.3rem;
  line-height: 1rem;
  font-size: 0.3rem;
}
.carItem .shopItem .shopInfo .price {
  margin-top: 0;
  color: #bb2c08;
}
.carItem .countCtrl {
  position: absolute;
  right: 0.2rem;
  bottom: 0.5rem;
}
.carItem .countCtrl span {
  display: inline-block;
  width: 0.6rem;
  height: 0.5rem;
  text-align: center;
  line-height: 0.5rem;
  border: 1px solid #333;
  font-size: 0.3rem;
}
.carItem .countCtrl span:nth-child(2) {
  border: none;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}
.cartFloor {
  position: absolute;
  bottom: 0;
  display: flex;
  height: 1rem;
  width: 100%;
  background-color: #eee;
  font-size: 0.4rem;
}
.cartFloor .iconfont {
  margin-top: 0.2rem;
  font-size: 0.5rem;
}
.cartFloor .allCheck {
  margin-left: 0.5rem;
  font-size: 0.3rem;
}
.cartFloor .right {
  position: absolute;
  right: 0;
  top: 0.2rem;
}
.cartFloor .right span {
  display: inline-block;
  font-size: 0.4rem;
  margin-left: 0.2rem;
}
.cartFloor .right span:last-child {
  text-align: center;
  color: #eee;
  width: 2rem;
  height: 100%;
  background-color: red;
}
</style>